import React, { Component } from 'react';
import { withRouter, Link, Switch, Route } from 'react-router-dom'

import "./../static/guide.styl"
import $ from 'jquery'
import u from '../common.js'

export default class Guide extends React.Component {
  constructor(props) {
    super(props)
    this.state={
      index:0,
    }
  }
  componentDidMount(){

    u.userInfo(data=>{
      if(data.data.newGuide==1){
        this.props.onGuideOpen(false)
      }
    })

    if(localStorage.getItem('newGuide')&&localStorage.getItem('newGuide')==1){
      this.props.onGuideOpen(false)
    }
    
  }
  //切换下一张
  toggle(){
  this.setState({
    index:this.state.index+1
  })
  if(this.state.index==5){
      this.close();
      return
  }
    
  }
//关闭以及完成按钮
  close(){
    this.setState({
      index:0
    })
    u.closeGuide({},data=>{
      // console.log(data)
      if(data.statusCode==200){
        this.props.onGuideOpen(false)
      }
    })
    
  }

render(){
  return (
    <div className={this.props.guideFlage?'guideBG':''}>
      {this.props.guideFlage ?<div className={'guide bgGuide'+this.state.index} >
     <p className='btn1' onClick={this.toggle.bind(this)}>{this.state.index==5?'完成':'下一步'}</p>
     <div className='btn2' onClick={this.close.bind(this)}>
       <img src={require('../static/image/guide_close.png')} alt="" />
     </div>
   </div>:''}
   
   </div>
  );
}
}